Angular অ্যাপ্লিকেশনে Highcharts ব্যবহার করে ডায়নামিক চার্ট তৈরি করা এবং তার ডেটা আপডেট ও রিফ্রেশ করার প্রক্রিয়া অত্যন্ত গুরুত্বপূর্ণ। এই ফিচারটি মূলত রিয়েল-টাইম ডেটা আপডেট করতে সাহায্য করে, যেমনঃ স্টক মার্কেট ডেটা, সেলস রিপোর্ট, সেন্সর ডেটা ইত্যাদি।

এখানে আমরা দেখব কিভাবে Angular অ্যাপ্লিকেশনে Highcharts চার্টের ডেটা আপডেট এবং রিফ্রেশ করা যায়।

1. ডেটা আপডেট এবং রিফ্রেশ করার জন্য প্রয়োজনীয় পদক্ষেপ

1. ডেটার ফেচিং: API কল বা টেস্ট ডেটা ব্যবহারের মাধ্যমে ডেটা আনা।
2. Highcharts চার্টের রিফ্রেশ: ডেটা আপডেট হওয়ার পরে Highcharts চার্টকে রিফ্রেশ করা।

2. Angular এবং Highcharts এর সাথে ডেটা আপডেট করা

ধরা যাক, আপনার চার্টে ডায়নামিক ডেটা লোড হচ্ছে, এবং আপনি চাইছেন এই ডেটা কিছু সময় পর পর রিফ্রেশ বা আপডেট হোক। Angular এ এটি করার জন্য, আপনি setInterval অথবা rxjs Observables ব্যবহার করতে পারেন।

উদাহরণ:

এখানে আমরা দেখব কিভাবে setInterval ব্যবহার করে প্রতি ৫ সেকেন্ডে Highcharts চার্টের ডেটা আপডেট করা যায়।

1. app.component.ts ফাইলে ডেটা আপডেট এবং চার্ট রিফ্রেশ:

import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  Highcharts = Highcharts;  // Highcharts ব্যবহার করার জন্য
  chartOptions: any;  // চার্টের অপশন স্টোর করার জন্য

  chartData = [10, 20, 30, 40, 50]; // ডিফল্ট ডেটা

  ngOnInit() {
    // প্রথমে চার্টের অপশন সেট করা
    this.chartOptions = {
      chart: {
        type: 'line'
      },
      title: {
        text: 'ডাইনামিক ডেটা দিয়ে আপডেট হওয়া চার্ট'
      },
      series: [{
        name: 'Sales',
        data: this.chartData
      }]
    };

    // প্রতি ৫ সেকেন্ডে ডেটা পরিবর্তন করে চার্ট আপডেট করা
    setInterval(() => {
      // নতুন ডেটা তৈরি
      this.chartData = this.chartData.map(data => data + Math.floor(Math.random() * 10));

      // Highcharts এর মাধ্যমে চার্ট আপডেট করা
      this.updateChart();
    }, 5000); // প্রতি ৫ সেকেন্ডে আপডেট হবে
  }

  // Highcharts.chart() ব্যবহার করে চার্ট আপডেট করা
  updateChart() {
    Highcharts.charts[0].series[0].setData(this.chartData);
  }
}

2. app.component.html ফাইলে Highcharts কম্পোনেন্ট:

<div style="height: 400px;">
  <highcharts-chart
    [Highcharts]="Highcharts"
    [options]="chartOptions"
    style="width: 100%; height: 100%; display: block;">
  </highcharts-chart>
</div>

3. ব্যাখ্যা:

• chartOptions: প্রথমে chartOptions অবজেক্টে Highcharts এর কনফিগারেশন সেট করা হয়েছে। এতে চার্টের ধরন (line), টাইটেল এবং সিরিজের ডেটা দেয়া হয়েছে।
• chartData: ডেটার একটি ডিফল্ট মান দেওয়া হয়েছে, যা পরবর্তীতে setInterval দ্বারা প্রতি ৫ সেকেন্ডে আপডেট হবে।
• setInterval: এই ফাংশনটি প্রতি ৫ সেকেন্ডে chartData এর মান পরিবর্তন করবে (এখানে Math.random() ব্যবহার করা হয়েছে)। তারপর updateChart() ফাংশন কল করা হবে।
• updateChart(): Highcharts এর setData() মেথড ব্যবহার করে ডেটার নতুন মান চার্টে আপডেট করা হচ্ছে।
• Highcharts.charts[0].series[0].setData(this.chartData): এই কোডটি Highcharts এর প্রথম চার্টের প্রথম সিরিজের ডেটা আপডেট করবে।

4. রিয়েল-টাইম ডেটা ফেচিং:

আপনি যদি API থেকে রিয়েল-টাইম ডেটা ফেচ করতে চান, তাহলে Angular এর HttpClient ব্যবহার করতে পারেন। নিচে একটি উদাহরণ দেওয়া হলো:

API থেকে ডেটা ফেচ করে চার্ট আপডেট করা:

1. app.component.ts:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  Highcharts = Highcharts;
  chartOptions: any;
  chartData: any[] = [];

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.chartOptions = {
      chart: {
        type: 'line'
      },
      title: {
        text: 'API থেকে ডেটা আপডেট করা চার্ট'
      },
      series: [{
        name: 'Sales',
        data: this.chartData
      }]
    };

    // প্রতি ৫ সেকেন্ডে API কল করে ডেটা আপডেট করা
    setInterval(() => {
      this.fetchData();  // API কল
    }, 5000);
  }

  fetchData() {
    // API থেকে ডেটা ফেচ করা
    this.http.get<any[]>('https://api.example.com/data').subscribe(data => {
      this.chartData = data.map(item => item.value);  // API ডেটা থেকে সিরিজ ডেটা তৈরি
      this.updateChart();
    });
  }

  updateChart() {
    Highcharts.charts[0].series[0].setData(this.chartData);
  }
}

সারাংশ

Highcharts এর সাথে Angular অ্যাপ্লিকেশনে ডায়নামিক ডেটা আপডেট এবং রিফ্রেশ করা খুবই সহজ। setInterval বা rxjs Observables ব্যবহার করে আপনি API থেকে রিয়েল-টাইম ডেটা ফেচ করতে পারেন এবং Highcharts.setData() ফাংশন ব্যবহার করে ডেটা আপডেট করতে পারেন। এই পদ্ধতি ব্যবহার করে আপনি ইন্টারঅ্যাকটিভ এবং রিয়েল-টাইম ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে পারবেন।